import Vue from 'vue'
/**
 * @params attrs Array
 * @return attrStr String
 */

export const getAttribute = (attrs)=>{
    let attrStr = ''
    attrs.forEach(item => {
        attrStr += `${item.key}=${item.value} `
    })

    return attrStr
}


/**
 * 生成uuid
 * @param {*} hasHyphen 
 * @returns uuid
 */
export function uuid(hasHyphen) {
    return (
      hasHyphen
        ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
        : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'
    ).replace(/[xy]/g, function (c) {
      const r = (Math.random() * 16) | 0;
      const v = c == 'x' ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    });
  }

/**
 * 挂载组件的方式
 * @param {*} component 
 */  
export const mountComponent = (component)=>{
    // 整理 data
    let data = {}
    if(component && component.attribute){
        component.attribute.forEach(item => {
            data[item.key] = item.value
        })
    }
    const id = component.info.id
    console.log('处理',component);
    // eslint-disable-next-line no-unused-vars
    let itemWidth = component.attribute.find(item => item.key === 'width')
     // eslint-disable-next-line no-unused-vars
    let itemHeight= component.attribute.find(item => item.key === 'height')
    console.log(document.getElementById(id),);
    setTimeout(() => {
        new Vue({
            el:document.getElementById(id),
            template:component.template,
            data(){
                return data
            },
            mounted(){
                this.$el.id = id
                this.$el.style.position = 'absolute'
                this.$el.style.cursor = 'pointer'
                this.$el.style.left = `${component.position.left}px`
                this.$el.style.top = `${component.position.top}px`
                this.$el.style.zIndex = `${component.position.zIndex}px`
                this.$el.style.width = `${itemWidth.value}px`
                this.$el.style.height = `${itemHeight.value}px`
                console.log('挂载',this);
            }
        }) 
    }, 200);
} 


